<!-- Dom模板 -->
<template>
  <div class="swipers" >
    <!-- Dom内容 -->
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide ref="mySwiperw" v-for="(banner, index) in bannerList" :key="index"  >
        <img :src="banner" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      bannerList: [
        "../../static/image/swiper.jpg",
        "../../static/image/swiper.jpg",
        "../../static/image/swiper.jpg",
        "../../static/image/swiper.jpg",
        "../../static/image/swiper.jpg",
      ],
      swiperOptions: {
         on:{
       slideChange:()=>{
            this.$emit("swiper","")
      },
  },
        pagination: {
          el: ".swiper-pagination",
          dynamicBullets: true, // 分页的小点可以点击
        },
        loop: true, // 环路翻滚
        autoplay: {
          delay: 3000, // 延时
          stopOnLastSlide: false, // 最后一个slide时是否继续轮播
          disableOnInteraction: false, // 点击小点是否终止自动轮播
        },
        // Some Swiper option/callback...
      },
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
   
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {   
    // console.log("Current Swiper instance object", this.swiper);
  },
  // Vue方法定义
  methods: {

  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.swipers {
  width: 98%;
  height: 130px;
  margin-left: 1%;
  border-radius: 10px;
}

.swipers .swiper-wrapper img {
  width: 100%;
  height: 130px;
  border-radius: 10px;
}
</style>